<template>
	<view class="">
		<view class="top-bg"></view>
		<view class="main-con">
			<view class="group_1">
				<view class="item-title">加盟说明：</view>
				<view class="item-text">{{ content }}</view>
			</view>
			<view class="group_1" style="margin-top: 20rpx;">
				<view class="b-b" style="padding-top:30rpx;" @click="show = true">
					<view class="">选择加盟店</view>
					<view class="flex-row items-center b-b">
						<input class="input fill" disabled v-model="form.address" type="text" value="" placeholder="请选择" />
						<u-icon name="arrow-right" size="22"></u-icon>
					</view>
				</view>
				<view class="b-b" style="padding-top:30rpx;">
					<view class="">联系人</view>
					<view class="flex-row items-center ">
						<input class="input fill" v-model="form.name" type="text" value="" placeholder="请输入" />
						<u-icon name="arrow-right" size="22"></u-icon>
					</view>
				</view>
				<view class="b-b" style="padding-top:30rpx;">
					<view class="">联系电话</view>
					<view class="flex-row items-center ">
						<input class="input fill" v-model="form.phone" maxlength="11" type="number" value="" placeholder="请输入" />
						<u-icon name="arrow-right" size="22"></u-icon>
					</view>
				</view>
				<view style="padding-top:30rpx;">
					<view class="">备注</view>
					<view class=" " style="padding-top:20rpx;">
						<textarea class="textarea" v-model="form.remarks" value="" placeholder="请输入" />
						<!-- <input class="input fill" disabled type="text" value="" placeholder="请选择" />
						<u-icon name="arrow-right" size="22"></u-icon> -->
					</view>
				</view>
			</view>
			<view class="btn" hover-class="hover-opacity" @click="submit">提交</view>
		</view>
		<mix-modal-s ref="mixModalS" @onConfirm="back"></mix-modal-s>
		<mix-loading v-if="isLoading"></mix-loading>
		<u-picker mode="region" v-model="show" @confirm="pickerConfirm"></u-picker>
	</view>
</template>

<script>
import { checkStr } from '@/common/js/util.js';
export default {
	data() {
		return {
			show: false,
			content: '',
			form: {
				uid:uni.getStorageSync('uid'),
				address: '',
				province: '',
				city: '',
				county: '',
				name: '',
				phone: '',
				remarks: ''
			}
		}
	},
	onLoad() {
		this.getContent();
	},
	methods: {
		pickerConfirm(e) {
			console.log(e);
			let address = e.province.label;
			if (e.city.label != '市辖区') {
				address += e.city.label;
				this.form.city = e.city.label;
			}
			if (e.area.label != e.city.label) {
				address += e.area.label;
				this.form.county = e.area.label;
			}
			this.form.province=e.province.label;
			this.form.address=address;
		},
		async submit() {
			const { province, name, phone, remarks } = this.form;
			if (province == '') {
				this.$util.msg('请选择加盟店!');
				return;
			}
			if (name == '') {
				this.$util.msg('请输入您的姓名!');
				return;
			}
			if (phone == '') {
				this.$util.msg('请输入您的联系方式!');
				return;
			}
			if (!checkStr(phone, 'mobile')) {
				this.$util.msg('手机号格式错误!');
				return;
			}
			if (remarks == '') {
				this.$util.msg('请填写备注信息,方便工作人员更方便的联系!');
				return;
			}
			const res = await this.$request('user/join', this.form, { showLoading: true });
			if (res.result == 0) {
				this.$refs.mixModalS.open();
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async getContent() {
			const res = await this.$request('content/text', { type: 1 });
			if (res.result == 0) {
				this.content = res.data.content;
			} else {
				this.$util.msg(res.resultNote);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.top-bg {
	width: 750rpx;
	height: 210rpx;
	background: $uni-color-bg;
	position: relative;
}
.main-con {
	width: 700rpx;
	position: absolute;
	left: 25rpx;
	top: 40rpx;
	z-index: 9;
	padding: 20rpx;
}
.group_1 {
	padding: 30rpx;
	background: #ffffff;
	box-shadow: 0px 5rpx 30rpx 0px rgba(112, 112, 112, 0.13);
	border-radius: 20rpx;
}
.item-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	padding-bottom: 20rpx;
}
.item-text {
	font-size: 24rpx;
	font-weight: 500;
	color: #999999;
	line-height: 36rpx;
	max-height: 170rpx;
	overflow-y: scroll;
}
.input {
	height: 70rpx;
	font-size: 26rpx;
	font-weight: 500;
}
.textarea {
	width: 100%;
	font-size: 26rpx;
	font-weight: 500;
	color: #999999;
	height: 156rpx;
	background: #f6f6f6;
	border-radius: 10rpx;
	padding: 20rpx;
}
.btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: $uni-color-bg;
	border-radius: 44rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #ffffff;
	margin-top: 50rpx;
}
</style>
